<template>
  <div class="logo-bar">
    <img src="@/assets/logo.jpg" alt="logo" style="width: 20px; height: auto" />
    <transition name="fade">
      <a-typography-title v-if="!hideName" class="logo-bar-name" :heading="5"> 警务督察管理 </a-typography-title>
    </transition>
  </div>
</template>

<script lang="ts" setup>
  defineProps({
    hideName: Boolean
  });
</script>

<style scoped lang="less">
  .logo-bar {
    display: flex;
    align-items: center;

    &-logo {
      width: 36px;
      color: rgb(var(--primary-6));
    }

    &-name {
      margin: 0;
      margin-left: 6px;
      font-size: 18px;
      white-space: nowrap;
    }
  }

  .fade-enter-active {
    transition: opacity ease-in-out 0.3s;
  }

  .fade-enter-from {
    opacity: 0;
  }

  .fade-leave-active {
    transition: opacity 0s;
  }

  .fade-leave-to {
    opacity: 0;
  }
</style>
